<template>
  <div>
    <el-card class="searchBox">
      <el-form label-width="80px" class="demo-input">
        <el-form-item label="病虫害名称:">
          <el-input v-model="input1" />
        </el-form-item>
        <el-form-item label="病虫害部位:">
          <el-select v-model="input2" placeholder="请选择">
            <el-option v-for="posOpt in positionOpt" :key="posOpt" :label="posOpt" :value="posOpt" />
          </el-select>
        </el-form-item>
        <el-form-item label="病虫害类型:">
          <el-select v-model="input3" placeholder="请选择">
            <el-option v-for="disType in diseaseType" :key="disType" :label="disType" :value="disType" />
          </el-select>
        </el-form-item>
        <el-form-item label-width="40px">
          <!-- <el-button type="info" plain @click="addDisease">添加</el-button> -->
          <el-button type="info" plain @click="resetting">重置</el-button>
          <el-button type="info" plain @click="searchDisease">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin: 15px 0;">
      <ul class="contBox">
        <li v-for="o in currentMes" :key="o.diseaseId" class="text item imgBox">
          <!-- <template> -->
          <!-- <el-button type="text" @click="outerVisible = true"> -->
          <!-- <el-button slot="reference" style="width: 340px;margin: -8px -15px;">
                <el-row :gutter="20">
                  <el-col :span="7">
                    <div class="grid-content bg-purple">
                      <el-image class="" style="padding: 0;width: 80px;height: 80px;" src="o.picture" />
                    </div>
                  </el-col>
                  <el-col :span="16">
                    <div class="grid-content bg-purple" style="text-align: left;">
                      <h3 class="comName">{{ o.scientificName }}</h3>
                      <div class="briefIntro">{{ o.briefIntro }}</div>
                    </div>
                  </el-col>
                  <div class="contBox_btnBox">
                    <el-button id="btn" type="primary" icon="el-icon-edit" size="mini"
                      @click="updateCharacte($event,o.diseaseId)" />
                    <el-button type="danger" icon="el-icon-delete" size="mini"
                      @click="delCharacter($event,o.diseaseId)" />
                  </div>
                </el-row> -->
          <!-- </el-button> -->
          <!-- </el-button> -->

          <!-- <el-dialog title="外层 Dialog" :visible.sync="outerVisible">
              <el-dialog width="30%" title="内层 Dialog" :visible.sync="innerVisible" append-to-body>
              </el-dialog>
              <div slot="footer" class="dialog-footer">
                <el-button @click="outerVisible = false">取 消</el-button>
                <el-button type="primary" @click="innerVisible = true">打开内层 Dialog</el-button>
              </div>
            </el-dialog>-->
          <!-- </template> -->
          <!-- <el-popover placement="right" width="440" trigger="click">-->
          <!-- <el-button type="text" @click="outerVisible = true"> -->
          <!-- <el-button slot="reference" style="width: 340px;margin: -12px -15px;" @click="outerVisible = true"  @click="getMeasure($event,o)"> -->
          <el-button slot="reference" style="width: 340px;margin: -12px -15px;" @click="getMeasure(o)">
            <el-row :gutter="20">
              <el-col :span="7">
                <div class="grid-content bg-purple">
                  <!-- <el-image class="" style="padding: 0;width: 90px;height: 90px;margin-left: -5px;" :src="o.picture" /> -->
                  <div class="demo-image__preview"
                    style="padding: 0;width: 90px;height: 90px;margin-left: -5px;z-index: 111;"
                    @click="previewImg($event)">
                    <el-image style="width: 90px; height: 90px" :src="o.picture" :preview-src-list="srcList">
                    </el-image>
                  </div>
                </div>
              </el-col>
              <el-col :span="17">
                <div class="grid-content bg-purple" style="text-align: left;padding: 0 8px;">
                  <h3 class="comName">
                    {{ o.scientificName.length < 11 ? o.scientificName : o.scientificName.slice(0,11) + '...' }}</h3>
                  <p class="briefIntro" style="white-space: pre-wrap;">
                    {{ o.briefIntro.length < 30 ? o.briefIntro : o.briefIntro.slice(0,30) + '...' }}</p>
                </div>
              </el-col>
              <div class="contBox_btnBox">
                <el-button id="btn" type="primary" icon="el-icon-edit" size="mini" @click="updateCharacte($event,o)" />
                <el-button type="danger" icon="el-icon-delete" size="mini" @click="delCharacter($event,o.diseaseId)" />
              </div>
            </el-row>
          </el-button>
          <el-dialog title="病虫害详情" :visible.sync="outerVisible">
            <el-dialog width="40%" title="防治方法" :visible.sync="innerVisible" append-to-body>
              <template>
                <el-table :data="Measure" stripe style="width: 100%" border>
                  <el-table-column prop="measureId" label="编号" width="200">
                  </el-table-column>
                  <el-table-column prop="measure" label="防治方法" width="320">
                  </el-table-column>
                </el-table>
              </template>
            </el-dialog>
            <div slot="footer" class="dialog-footer">
              <el-button @click="outerVisible = false" style="pointer-events:auto">取 消</el-button>
              <el-button type="primary" @click="innerVisible = true" style="pointer-events:auto">防治方法</el-button>
            </div>
            <div class="">
              <template>
                <el-table :data="thisMes" border style="width: 100%">
                  <el-table-column fixed prop="scientificName" label="中文名" width="100">
                  </el-table-column>
                  <el-table-column prop="englishName" label="英文名" width="120">
                  </el-table-column>
                  <el-table-column prop="commonName" label="常用名" width="120">
                  </el-table-column>
                  <el-table-column prop="occurSeason" label="出现季节" width="120">
                  </el-table-column>
                  <el-table-column prop="type" label="病虫害类型" width="120">
                  </el-table-column>
                  <el-table-column prop="diseasePlace" label="病虫害发生部位" width="120">
                  </el-table-column>
                  <el-table-column prop="occurLocationPicture" label="病虫害分布情况" width="120">
                  </el-table-column>
                  <el-table-column prop="vedioLink" label="病虫害视频" width="120">
                  </el-table-column>
                  <el-table-column prop="picture" label="病虫害图片" width="120">
                  </el-table-column>
                  <el-table-column prop="briefIntro" label="病虫害简介" width="120">
                  </el-table-column>
                  <el-table-column fixed="right" prop="mainSymptom" label="主要症状" width="130">
                  </el-table-column>
                </el-table>
              </template>
            </div>
          </el-dialog>
          <!-- </el-popover> -->
        </li>
      </ul>
    </el-card>

    <el-card>
      <el-pagination :current-page="currentPage" :page-sizes="pageSizes" :page-size="pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </el-card>

    <!-- <el-dialog title="新增" :visible.sync="addFormVisible" width="70%" :before-close="handleClose">
      <span slot="footer" class="dialog-footer">
        <el-button @click="addFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addCharacter">提 交</el-button>
      </span>
      <el-form ref="form" :model="form">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害名称（中文）" required>
            <el-input v-model="form.scientificName" />
          </el-form-item>
          <el-form-item label="病虫害名称（英文）">
            <el-input v-model="form.englishName" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害名称（常用名）">
            <el-input v-model="form.commonName" />
          </el-form-item>
          <el-form-item label="出现季节">
            <el-input v-model="form.occurSeason" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害类型" required>
            <el-select v-model="form.type" placeholder="请选择活动区域">
              <el-option v-for="disType in diseaseType" :key="disType" :label="disType" :value="disType" />
            </el-select>
          </el-form-item>
          <el-form-item label="病虫害发生部位" required>
            <el-select v-model="form.diseasePlace" placeholder="请选择">
              <el-option v-for="posOpt in positionOpt" :key="posOpt" :label="posOpt" :value="posOpt" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害主要分布情况（仅支持链接）">
            <el-input v-model="form.occurLocationPicture" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" required>
          <el-form-item label="病虫害图片（仅支持链接）" required>
            <el-input v-model="form.picture" />
          </el-form-item>
          <el-form-item label="病虫害视频（仅支持链接）">
            <el-input v-model="form.vedioLink" />
          </el-form-item>
        </el-form>
        <el-form-item label="病虫害简介" required style="margin: 0 15px;">
          <el-input v-model="form.briefIntro" type="textarea" />
        </el-form-item>
        <el-form-item label="主要症状" required style="margin: 0 15px;">
          <el-input v-model="form.mainSymptom" type="textarea" />
        </el-form-item>
      </el-form>
    </el-dialog> -->

    <el-dialog title="修改信息" :visible.sync="updateFormVisible" width="70%" :before-close="handleClose">
      <el-form ref="changeForm" :model="changeForm">
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害名称（中文）" required>
            <el-input v-model="changeForm.scientificName" />
          </el-form-item>
          <el-form-item label="病虫害名称（英文）">
            <el-input v-model="changeForm.englishName" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害名称（常用名）">
            <el-input v-model="changeForm.commonName" />
          </el-form-item>
          <el-form-item label="出现季节">
            <el-input v-model="changeForm.occurSeason" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害类型" required>
            <el-select v-model="changeForm.type" placeholder="请选择活动区域">
              <el-option v-for="disType in diseaseType" :key="disType" :label="disType" :value="disType" />
            </el-select>
          </el-form-item>
          <el-form-item label="病虫害发生部位" required>
            <el-select v-model="changeForm.diseasePlace" placeholder="请选择">
              <el-option v-for="posOpt in positionOpt" :key="posOpt" :label="posOpt" :value="posOpt" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline">
          <el-form-item label="病虫害主要分布情况（仅支持链接）">
            <el-input v-model="changeForm.occurLocationPicture" />
          </el-form-item>
        </el-form>
        <el-form :inline="true" class="demo-form-inline" required>
          <el-form-item label="病虫害图片（仅支持链接）" required>
            <el-input v-model="changeForm.picture" />
          </el-form-item>
          <el-form-item label="病虫害视频（仅支持链接）">
            <el-input v-model="changeForm.vedioLink" />
          </el-form-item>
        </el-form>
        <el-form-item label="病虫害简介" required style="margin: 0 15px;">
          <el-input v-model="changeForm.briefIntro" type="textarea" />
        </el-form-item>
        <el-form-item label="主要症状" required style="margin: 0 15px;">
          <el-input v-model="changeForm.mainSymptom" type="textarea" />
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="subupdateCharacte">确 定</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import request from '../../../utils/request'

export default {
  name: 'GraphicDiagnosis',

  data () {
    return {
      positionOpt: ['根', '茎', '叶', '树干', '枝', '新梢', '果'],
      diseaseType: ['虫害', '病害', '生理病虫害', '草害', '天敌'],
      input1: '',
      input2: '',
      input3: '',
      updateFormVisible: false,
      outerVisible: false,
      innerVisible: false,
      currentId: null,
      form: [],
      changeForm: {
        scientificName: '', // 中文名
        englishName: '', // 英文名
        commonName: '', // 常用名
        occurSeason: '', // 出现季节
        type: '', // 病虫害类型
        diseasePlace: '', // 病虫害发生部位
        occurLocationPicture: '', // 病虫害分布情况（链接）
        picture: '', // 病虫害图片
        vedioLink: '', // 病虫害视频
        briefIntro: '', // 病虫害简介
        mainSymptom: '', // 主要症状
        diseaseId: ''
      },
      mes: [], // 所有的病虫害信息
      currentMes: [], // 显示在当前页面的li的病虫害信息
      thisMes: [], // 当前点击的li的病虫害信息
      total: null,
      pageSizes: [9, 12, 15, 18],
      pageSize: 9,
      currentPage: 1,
      Measure: [], //防治方法
      srcList: [], // 放大图片的链接
    }
  },

  mounted () {
    this.getAllMes()
    this.getFirstMes()
  },

  methods: {
    previewImg (e) {
      e.stopPropagation()
      // console.log(e.target);
    },
    async getAllMes () {
      request({
        method: 'get',
        url: '/pad/characteristic/getAll'
      }).then((response) => {
        this.mes = response.data
        this.total = this.mes.length
        console.log('getAllMes', this.mes)
        if (this.srcList) {
          this.srcList = []
        };
        for (var i = 0; i < this.mes.length; i++) {
          this.srcList[i] = this.mes[i].picture
        }
      })
    },
    async getFirstMes () {
      request({
        method: 'get',
        url: '/pad/characteristic/pageCharacter/' + this.currentPage + '/' + this.pageSize
      }).then((response) => {
        console.log('getFirstMes', response.data.records)
        this.currentMes = response.data.records
      })
    },
    // addDisease () {
    //   this.addFormVisible = true
    //   if (this.input1) {
    //     this.form.scientificName = this.input1
    //   }
    //   if (this.input2) {
    //     this.form.diseasePlace = this.input2
    //   }
    //   if (this.input3) {
    //     this.form.type = this.input3
    //   }
    //   if (!this.input1 && !this.input2 && !this.input3) {
    //     this.form = {}
    //   }
    //   console.log(this.form)
    // },
    resetting () {
      this.input1 = ''
      this.input2 = ''
      this.input3 = ''
      this.getFirstMes()
    },
    searchDisease () {
      const characterQuery = {
        'diseasePlace': this.input2,
        'scientificName': this.input1,
        'type': this.input3
      }
      request({
        method: 'post',
        url: '/pad/characteristic/pageCharacterCondition/1/' + this.pageSize,
        data: characterQuery
      }).then((response) => {
        console.log('searchDisease', response.data.records)
        this.currentMes = response.data.records
      })
    },
    getThisMes (o) {
      this.thisMes = [].concat(o)
    },
    updateCharacte (e, o) {
      e.stopPropagation()
      this.updateFormVisible = true
      this.getThisMes(o)
      console.log('o', o);
      this.currentId = o.diseaseId
      this.changeForm = JSON.parse(JSON.stringify(this.thisMes))[0]
      this.form = JSON.parse(JSON.stringify(this.thisMes))

    },
    async subupdateCharacte () {
      this.updateFormVisible = false
      this.changeForm = JSON.parse(JSON.stringify(this.changeForm))
      this.getThisMes(this.changeForm)

      await request({
        url: '/pad/characteristic/getById/' + this.currentId,
        method: 'get'
      }).then((response) => {
        // console.log('--1', response.data);
        request({
          url: '/pad/characteristic/updateCharacter',
          method: 'post',
          data: this.changeForm
        })
      })
      this.getAllMes()
      this.getFirstMes()
    },
    async delCharacter (e, id) {
      e.stopPropagation()
      await request({
        method: 'delete',
        url: '/pad/characteristic/delete/' + id
      }).then(response => {
        // console.log(response.data)
        if (response.statusCode == 20000) {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
        } else {
          this.$message({
            message: '删除失败',
            type: 'warning'
          })
        }
        this.getAllMes()
        this.getFirstMes()
      })
    },

    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
          this.changeForm = {}
          this.form = []
        })
        .catch(_ => {
        })
    },
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getFirstMes()
    },
    handleCurrentChange (val) {
      request({
        method: 'get',
        url: '/pad/characteristic/pageCharacter/' + val + '/' + this.pageSize
      }).then((response) => {
        console.log('handleCurrentChange', response.data.records)
        this.currentMes = response.data.records
        this.currentPage = val
      })
    },
    // addCharacter () {
    //   this.addFormVisible = false
    //   request({
    //     method: 'post',
    //     url: '/pad/characteristic/addCharacter',
    //     data: this.form
    //   }).then(response => {
    //     console.log(response.data)
    //     if (response.statusCode == 20000) {
    //       this.dialogFormVisible = false
    //       this.form = {}
    //       this.getAllMes()
    //       this.getFirstMes()
    //       this.$message({
    //         message: '添加成功',
    //         type: 'success'
    //       })
    //     } else {
    //       this.$message({
    //         message: '发生错误，添加失败',
    //         type: 'warning'
    //       })
    //     }
    //   })
    //   console.log('submit!')
    // },
    async getMeasure (o) {
      this.outerVisible = true
      // console.log('getMeasure');
      this.getThisMes(o)
      await request({
        method: 'get',
        url: '/pad/measure/getByCharacterId/' + o.diseaseId
      }).then(response => {
        console.log('getMeasure', response.data);
        if (response.statusCode == 20000) {
          this.Measure = response.data
        } else {
          this.$message({
            message: '发生错误，打开失败',
            type: 'warning'
          })
        }
      })
    },

  }
}
</script>

<style lang="scss" scoped>
.demo-input {
  display: flex;
  justify-content: space-around;
  align-content: center;
}

.el-form {
  margin: 10px 15px;
}

.el-form-item {
  margin-bottom: 0;
}

.text {
  font-size: 14px;
}

.box-card {
  width: 480px;
}

.el-card .el-card__body {
  padding: 0px;
}
.contBox {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
  align-items: flex-start;
}
.contBox li {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 340px;
  margin: 15px;
  padding-left: 15px;
}
.contBox li:hover .contBox_btnBox {
  display: block;
}
.imgBox {
  display: inline-block;
  height: 100px;
  padding: 10px;
}
.contBox_btnBox {
  display: none;
  position: absolute;
  top: -5px;
  right: 5px;
}

.comName {
  font-size: 15px;
  font-weight: 400;
  margin: 5px;
}
.briefIntro {
  // overflow: scroll;
  margin: 5px;
  text-indent: 2em;
  width: 200px;
  height: 62px;
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
  line-height: 1.3;
}
.demo-table-expand {
  font-size: 0;
}
.demo-table-expand label {
  width: 90px;
  color: #99a9bf;
}
.demo-table-expand .el-form-item {
  margin-right: 0;
  margin-bottom: 0;
  width: 120%;
}
</style>
